<template>
  <div class="sensor">
    <div class="title">任务进度</div>
    <div class="content">
      <div class="info">
        <div>
          <span>任务名称：</span>
          <span>{{ taskProgressArr.taskName }}</span>
        </div>
        <div>
          <span>任务进度：</span>
          <span>{{ taskProgressArr.taskName }}</span>
        </div>
        <div>
          <span>任务时长：</span>
          <span>{{ taskProgressArr.duration }}</span>
        </div>
      </div>

      <div class="task-list">
        <div
          v-for="(item, index) in taskProgressArr.children"
          :key="index"
          class="item"
        >
          <span class="time">{{ item.startTime.slice(-8) }}</span>
          <span class="state">{{ item.state }}</span>
          {{}}
          <span class="status">
            <div
              :class="{
                right:
                  new Date(item.startTime).getTime() <=
                  new Date(nowTime).getTime(),
              }"
              class="close"
            >
              {{
                new Date(item.startTime).getTime() <=
                new Date(nowTime).getTime()
                  ? ""
                  : "X"
              }}
            </div>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, inject, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
const props = defineProps({
  taskProgressArr: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
let emit = defineEmits([""]);
import { useStore } from "vuex";
import moment from "moment";
const store = useStore();
const nowTime = computed(() => {
  return store.state.home.nowTime;
});
onMounted(() => {});
</script>
<style scoped lang="scss">
.sensor {
  width: 300px;
  height: 500px;
  border: 1px solid #31ecf0;
  box-shadow: 0px 0px 5px 1px #31ecf0;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 2;
  background: #1a0936;
  .title {
    height: 30px;
    background: #14384e;
    line-height: 30px;
    text-align: center;
  }
  .content {
    height: calc(100% - 30px);
    overflow: hidden;
    .info {
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      border: 1px solid #fff;
    }
    .task-list {
      height: calc(100% - 80px);
      overflow: hidden;
      overflow-y: auto;
      .item {
        height: 40px;
        font-size: 12px;
        display: flex;
        line-height: 40px;
        .time {
          width: 70px;
          height: 40px;
          padding-left: 10px;
          display: inline-block;
          border-right: 1px dashed #fff;
          position: relative;
          border: 1px solid #fff;
          &::after {
            content: "";
            position: absolute;
            right: 0;
            top: 50%;
            transform: translate(50%, -50%);
            height: 8px;
            width: 8px;
            border-radius: 50%;
            background: pink;
          }
        }
        .state {
          display: inline-block;
          height: 100%;
          width: 160px;
          overflow: hidden; /* 确保溢出的内容会被隐藏 */
          white-space: nowrap; /* 确保文本在一行内显示，不换行 */
          text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
          padding: 0 10px;
          border: 1px solid #fff;
        }
        .status {
          width: calc(100% - 80px - 160px);
          height: 100%;
          border: 1px solid #fff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .right {
          height: 40px;

          width: 20px;
          height: 20px;

          border-radius: 50%;

          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          background: #509ae0;
          &::before {
            content: "";
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 10px;
            height: 6px;
            border: 2px solid #fff;
            border-right: none;
            border-top: none;
            transform: rotate(-45deg) translate(0%, -120%);
          }
        }
        .close {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: #509ae0;
          text-align: center;
          line-height: 20px;
        }
      }
    }
  }
}
</style>
